<template>
  <div @touchmove="loadingMore()" @wheel="loadingMore()">
    <div class="pay_top">
      <p class="iconfont icon-fanhui comeback" @click="$router.go(-1)"></p>
      <p>商品列表</p>
    </div>

    <h3 class="index_bottom_title">附近商家</h3>
    <div class="index_bottom">
      <div class="index_foot">
        <p @click="getAllSort(1)" :class="{'active':sort_status === 1}">
          离我最近</p>
        <p @click="getAllSort(2)" :class="{'active':sort_status === 2}">
          折扣最高</p>
        <p @click="getAllSort(3)" :class="{'active':sort_status === 3}">
          最新发布</p>
        <p @click="getAllSort(4)" :class="{'active':sort_status === 4}">
          价格排序</p>
        <p @click="getAllSort(5)" :class="{'active':sort_status === 5}">
          好评排序</p>
      </div>

      <div class="index_foot_list" v-for="item in allSortList" :key="item.id"
           @click="$router.push({ name: 'detail', params: { id: item.id,status:1 }})">
        <img :src="`${baseImgUrl}${item.store_images}`" alt="">
        <div>
          <p class="list_name">{{item.shop_name}}</p>
          <p class="list_content">[{{item.address}}]</p>
          <p class="list_price" v-if="item.discount/1 !== 10 && item.discount/1 !== 0">{{item.discount/1}}折起 </p>

        </div>
        <div class="align_self">
          <p class="fontSm">{{item.distance}}km</p>
          <span class="colorRed" v-show="item.amount_money">￥{{item.amount_money}}</span>
          <p style="color: #756b5e;font-size: .12rem">已售 {{item.sold_num}}</p>
        </div>
      </div>
      <div>
        <div style="width: 100%;text-align: center;padding: .2rem 0" @click="loadingMore()"
             v-if="allSortList.length !== 0">
          <span v-if="allLoaded">上拉或点击加载更多</span>
          <span v-else>没有更多了</span>
        </div>
        <div style="width: 100%;text-align: center;padding: .2rem 0" v-if="allSortList.length === 0">
          商家招募中
          <div style="margin-top: 10px" @click="">
            <el-button type="primary" @click="$router.replace('/application')">商家入驻</el-button>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {allSort, ImgBaseUrl} from "../../api";

  export default {
    name: "storeList",
    data() {
      return {
        baseImgUrl: ImgBaseUrl,
        shopCateListData: '',
        allSortList: [],
        sort_status: [],
        sortPage: 1,
        allLoaded: true,
        loading: false,//判断是否加载数据
        loading_more: true,//控制是否发送ajax请求
      }
    },
    mounted() {
      //路由拦截。。。
      if (!localStorage.longitude_latitude) {
        location.assign('./index.html')
      }
      this.getAllSort(1)
    },
    methods: {
      async getAllSort(sort_status) {
        this.allLoaded = true;
        this.loading_more = true;
        this.sort_status = sort_status;
        this.sortPage = 1;
        let result = await allSort(sort_status, localStorage.longitude_latitude, 2, this.$route.params.id, 1, localStorage.area_id);
        if (result.code === 1) {
          console.log(result);
          this.allSortList = result.data.data
        }
      },
      async loadingMore() {
        if (this.allLoaded === false) {
          return
        }
        if ($(window).scrollTop() + $(window).height() + 200 >= $(document).height()) {
          // console.log(1)
          this.allLoaded = false;
          this.loading = true;
          this.sortPage++;
          let result;
          if (this.loading_more) {
            this.loading_more = false; //禁止浏览器发送ajax请求
            result = await allSort(this.sort_status, localStorage.longitude_latitude, 2, this.$route.params.id, this.sortPage, localStorage.area_id);
            if (result.code === 1) {//判断接受是否成功
              this.loading = false;
              console.log(this.allSortList.length, result.data.total);
              if (this.allSortList.length === result.data.total) {

              } else {
                this.allLoaded = true;
                this.loading_more = true;
                this.allSortList = [...this.allSortList, ...result.data.data];
              }
            } else {
              setTimeout(() => {
                this.loading = false;
                this.loading_more = true
              }, 1000)
            }
          } else {
            this.loading = false
          }
        }
      },
    }
  }
</script>

<style scoped>

</style>
